<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="text" id="search" placeholder="请输入想要查询的城市?"/>
		<div class="mainDom">
		</div>
		<script src="js/getAjax.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
				/* 
					1.获取HTML标签
					2.为input创建监听键盘按下事件，为Enter时获取value，赋予地址
					3.获取天气信息,调用getAjax函数，将json转为对象，结合HTML元素放入main中				
				*/
				var inputDom = document.querySelector("#search");
				var mainDom = document.querySelector(".mainDom");
				
				inputDom.onkeydown = function(e){
					if(e.key=="Enter"){
						var cityName = inputDom.value;
						// console.log(cityName);
						var httpUrl =" https://devapi.qweather.com/v7/weather/now?key=7d416dbe995144d1b1de2ffd664f5f2a&location="+cityName+"";
						
						getAjax(httpUrl,function(res){
							// console.log(res);
							var obj = JSON.parse(res.response);
							console.log(obj.now);
							var now = obj.now;
							mainDom.innerHTML = `
									<img src="https://icons.qweather.com/icons/#sunny" >
									<h2>温度:${now.temp}</h2>
									<h2>风向:${now.windDir}</h2>
									<h2>风力:${now.windScale}</h2>
							`
						})
					}
				}
		</script>
	</body>
</html>